<template>
	<div class="online">
		<el-row class="searchForm">
			<el-col :span="15">
				<el-form
					ref="searchForm"
					:model="searchForm"
					status-icon
					label-width="100px"
					size="mini"
					:inline="true"
				>
					<el-form-item label="登录名称" prop="username" class="form-item">
						<el-input
							v-model.trim="searchForm.username"
							placeholder="请输入登录名称"
							class="form-input"
						></el-input>
					</el-form-item>
					<el-form-item label="登录IP" prop="loginIp" class="form-item">
						<el-input
							v-model.trim="searchForm.loginIp"
							placeholder="请输入登录IP"
							class="form-input"
						></el-input>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="8">
				<el-button type="primary" size="mini" icon="el-icon-search" @click="search"
					>搜索</el-button
				>
				<el-button size="mini" icon="el-icon-refresh" @click="resetForm('searchForm')"
					>重置
				</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="refresh">刷新 </el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%">
				<el-table-column prop="userId" label="用户编号"> </el-table-column>
				<el-table-column show-overflow-tooltip prop="tokenId" label="会话编号">
				</el-table-column>
				<el-table-column prop="username" label="登录名称"> </el-table-column>
				<el-table-column prop="loginIp" label="登录IP"> </el-table-column>
				<el-table-column prop="loginLocation" label="登录地点"> </el-table-column>
				<el-table-column prop="browserName" label="浏览器"> </el-table-column>
				<el-table-column prop="osName" label="操作系统"> </el-table-column>
				<el-table-column prop="loginDate" label="登录时间"> </el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-row v-if="scope.row.userId != 1">
							<el-button
								@click.native.prevent="forceUser(scope.row)"
								type="text"
								icon="el-icon-delete-solid"
								size="small"
							>
								强退
							</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row type="flex" justify="center" style="padding-top: 20px">
			<el-col :span="6">
				<el-pagination
					background
					@size-change="handlePageSize"
					@current-change="handlePage"
					:current-page="searchForm.page"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="searchForm.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="listTotal"
				>
				</el-pagination>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { getAllUser, forceUser } from "@/api/monitor/online"
export default {
	name: "FrontOnline",

	data() {
		return {
			searchForm: {
				username: "",
				loginIp: "",
				page: 1,
				pageSize: 10,
			},
			list: [
				{
					userId: 1,
					username: "admin",
					nickname: "管理员吧",
				},
			],
		}
	},

	mounted() {
		this.get()
	},

	methods: {
		search() {
			this.get()
		},
		refresh() {
			this.get()
		},
		async get() {
			let search = { ...this.searchForm }
			let res = await getAllUser(this.$Tool.removeNullFiled(search))
			if (res.code == 200) {
				this.list = res.data
				this.listTotal = res.total
			}
		},
		forceUser({ userId, tokenId }) {
			this.handConfirm("强退", tokenId, async () => {
				let res = await forceUser({ userId })
				if (res.code == 200) {
					this.refresh()
				}
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		},
		handlePageSize(val) {
			this.searchForm.pageSize = val
			this.refresh()
		},
		handlePage(val) {
			this.searchForm.page = val
			this.refresh()
		},

		handConfirm(text, data, success, error = () => {}) {
			this.confirm(
				this.$confirm,
				`您是否确认${text}会话编号为"${this.$Tool.handlerLongStr(
					data.toString()
				)}"的数据项`,
				success,
				error
			)
		},
	},
}
</script>
